<!--
 * @Author: C.
 * @Date: 2021-06-10 09:15:49
 * @LastEditTime: 2021-06-17 16:48:09
 * @Description: file content
-->
<template>
  <div class="jv-table">
    <el-Table :data="data"
              v-loading="loading"
              v-bind="$attrs"
              v-on="$listeners"
              :row-key="row=>row[jvKey]"
              height="100%"
              @selection-change="handleSelectionChange"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(225, 225, 225, 0.4)"
              border
              :stripe="true"
              :highlight-current-row="true"
              :header-cell-style="headerCellStyle"
              :cell-style="cellStyle"
              style="width: 100%"
              ref="multipleTable"
              size="mini"
              :fullscreen="true">
      <!-- 序号 -->
      <el-table-column fixed
                       align="center"
                       type="index"
                       width="50">
      </el-Table-column>
      <!-- 开启选择框 -->
      <el-Table-column fixed
                       type="selection"
                       width="50"
                       align="center"
                       :reserve-selection="true">
      </el-Table-column>
      <slot></slot>
    </el-Table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表头样式
      headerCellStyle: {
        backgroundColor: '#f2f4fa',
        color: '#4f4f4f',
        fontWeight: '700',
        fontSize: '13px',
        fontFamily: '"Verdana", "Courier New"'
      },
      // 单元格样式
      cellStyle: {
        padding: '3px 0',
        fontSize: '14px',
        color: 'black'
      }
    }
  },
  mounted () {
  },
  methods: {
    // 处理多选
    handleSelectionChange (val) {
      let Keys = []
      val.forEach(item => {
        Keys.push(item[this.jvKey])
      })
      this.$emit('selectionChange', Keys, val)
    },
    clearSelection () {
      this.$refs.multipleTable.clearSelection()
    },
    getTableRef () {
      return this.$refs.multipleTable
    }
  },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => [],
      require: true
    },
    // 绑定的key值
    jvKey: {
      type: String,
      require: true
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
.jv-table {
  height: 85%;
  .el-table tbody .el-table__row--striped td {
    background: #ededed !important;
  }
  .el-table tbody .current-row td {
    color: #fff !important;
    background-color: #475564 !important;
  }
  .el-table tbody .hover-row td {
    color: #fff !important;
    background-color: #475564 !important;
  }
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #ccc;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #ccc;
  }
  .el-table .el-table__row .cell .el-button {
    padding: 5px !important;
  }
}
</style>
